import React, { useDeferredValue, useMemo, useState } from 'react';
import List from './18-List'

const App = () => {

  const [inpVal, setInpVal] = useState('')

  const deferredValue = useDeferredValue(inpVal)

  console.log('deferredValue',deferredValue);
  console.log('inpVal',inpVal);
  const memoList = useMemo(()=>{
    return (<List count={deferredValue}></List>)
  }, [deferredValue])
  return (
    <div>
      <input type="text" value={inpVal} onChange={e => setInpVal(e.target.value)} />

      {memoList}
    </div>
  );
};

export default App;
